import {Button, Modal} from "antd";

const MessageContent = (props) => {

    const {messageContentVisible, setMessageContentVisible, messageContent, setMessageContent} = props;

    return (
        <Modal
            title={"消息内容详情"}
            open={messageContentVisible}
            onCancel={() => {
                setMessageContentVisible(false);
                setMessageContent("");
            }}
            footer={<div>
                <Button
                    type={'primary'}
                    onClick={() => {
                        setMessageContentVisible(false);
                        setMessageContent("");
                    }}
                >
                    关闭
                </Button>
            </div>}
        >
            <div style={{
                margin: '10px 0',
                padding: '5px 15px',
                backgroundColor: '#f5f5f5',
                overflow: 'auto',
                flexWrap: 'wrap'
            }}>
                {(() => {
                    try {
                        // 尝试解析JSON
                        const parsed = JSON.parse(messageContent.trim());
                        // 解析成功，格式化为带缩进的JSON字符串
                        return JSON.stringify(parsed, null, 2);
                    } catch (e) {
                        // 解析失败，直接返回原始内容
                        return messageContent;
                    }
                })()}
            </div>
        </Modal>
    )
}

export default MessageContent;